<template>
  <view class="content">
    <TopNav></TopNav>

    <view class="top-image-cont">
      <!-- 蒙版 -->
      <view class="mask"></view>
      <!-- 背景 -->
      <view class="bg">
        <u--image
          mode="aspectFill	"
          :showLoading="true"
          src="https://hi77-overseas.mangafuna.xyz/weirenzhuanshengwuguodazhan/cover/1671685667.jpg.328x422.jpg"
        ></u--image>
      </view>
      <!-- 信息 -->
      <view class="manga-head-info-cont p-center">
        <view class="manga-title">偉人轉生-五國大戰</view>
        <view class="manga-cover-cont">
          <u--image
            mode="aspectFill"
            width="110px"
            height="142px"
            :showLoading="true"
            src="https://hi77-overseas.mangafuna.xyz/weirenzhuanshengwuguodazhan/cover/1671685667.jpg.328x422.jpg"
          ></u--image>
          <view class="manga-base-info">
            <text>作者:</text>
            <text>原作:</text>
            <text>状态:</text>
            <text>最后更新:</text>
            <text>热度:</text>
            <text>
              评分:
              <u-rate count="5" v-model="rateValue"></u-rate>
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="manga-cont">
      <view class="operation flex-row p-10">
        <template v-for="(item, index) in buttonListMapper">
          <template v-if="item.text === '开始阅读'">
            <u-button
              class="m-lr-10"
              :key="index"
              :icon="item.icon"
              :type="item.type"
              :shape="item.shape"
              :text="item.text"
              @click="goReadManga(item)"
            ></u-button>
          </template>
          <template v-if="item.btnType === 'collect'">
			<u-button
			  v-if="item.isCollected == true"
              class="m-lr-10"
              :key="index"
              :icon="item.icon"
              :type="item.type"
              :shape="item.shape"
              text="已收藏"
              @click="handleSaveToCollection(item)"
            ></u-button>
			<u-button
			  v-else
              class="m-lr-10"
              :key="'加入收藏' + index"
              :icon="item.icon"
              :type="item.type"
              :shape="item.shape"
              text="加入收藏"
              @click="handleSaveToCollection(item)"
            ></u-button>
          </template>
        </template>
      </view>
      <view class="manga-content-cont">
        <u-tabs
          :list="list1"
          :current="current"
          @click="click"
          @change="change"
        ></u-tabs>

        <view class="tab-panel" v-show="current === 0"> 213210000 </view>
        <view class="tab-panel sentence-list-cont" v-show="current === 1">
          <u-button
            text="月落"
            plain
            type="primary"
            v-for="item in sentenceList"
          ></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import TopNav from "../../components/topNav.vue";
import { goReadManga } from "../../utils/routerNavigator.js";

let current = ref(1);
let rateValue = ref(5);
let list1 = reactive([
  {
    name: "详情",
  },
  {
    name: "目录",
  },
]);
let sentenceList = reactive([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
let buttonListMapper = [
  {
    type: "warning",
    // text: "加入收藏",
    icon: "star",
    shape: "circle",
    size: "normal",
	btnType:'collect',
	isCollected:false,
  },
  {
    type: "primary",
    text: "开始阅读",
    icon: "eye",
    shape: "circle",
    size: "normal",
  },
];

function click() {}

function change(i) {
  current.value = i.index;
}

function handleSaveToCollection(item) {
	// // dev-log
	console.log('dev_log-',item)
	
	item.isCollected = !item.isCollected
}
</script>

<style scoped lang="scss">
.content {
  // position: relative;
}
.top-image-cont {
  // z-index: -1;
  overflow: hidden;
  width: 100%;
  height: 500rpx;
  position: relative;
  // top: 0;

  .mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #000;
    opacity: 0.75;
  }

  .bg {
    width: 100%;
    height: 100%;
    :deep(.u-transition) {
      width: 100% !important;
      height: 100% !important;

      .u-image,
      .u-image__image {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }

  .manga-head-info-cont {
    width: 100%;
    z-index: 9;
    overflow: hidden;
    color: #aaa;

    .manga-title {
      padding: 20rpx 0;
      text-align: center;
      width: 100%;
      font-size: 40rpx;
    }
    .manga-cover-cont {
      padding: 0 40rpx;
      display: flex;
      justify-content: space-around;

      .manga-base-info {
        flex: 1 0 auto;
        padding: 0 40rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        text {
          padding-bottom: 5rpx;
        }
      }
    }
  }
}

:deep(.u-tabs__wrapper__nav) {
  // justify-content: space-around;

  .u-tabs__wrapper__nav__item {
    width: 50%;
    padding: 0;
  }
}
.manga-cont {
  .operation {
    .u-button {
      // margin: ;
    }
  }

  .manga-content-cont {
    .tab-panel {
      padding: 20rpx;
    }
    .sentence-list-cont {
      padding: 20rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      flex-wrap: wrap;

      .u-button {
        width: 100rpx;
        margin: 14rpx;
      }
    }
  }
}
</style>
